<template>
  <div>
    <el-table
        :data="tableData"
        :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
        row-key="id"
        border
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          >
      </el-table-column>
      <el-table-column
          prop="des"
          label="介绍"
          width="300"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          prop="coverImg"
          label="封面"
      >
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.coverImg"
              fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="videoUrl"
          label="视频"
          >
        <template slot-scope="scope">
          <video
              style="width: 240px; height: 135px"
              controls
              :src="scope.row.videoUrl"></video>
        </template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          >
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button v-if="editShow" type="primary" @click="editVideo(scope.row.id)" size="mini">修改</el-button>
          <el-button v-if="delShow" type="primary" @click="deleteVideo(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageC
            :top-level="topLevel"
            :handleSizeChange="handleSizeChange"
            :handleCurrentChange="handleCurrentChange"
            :pageSize="pageSize"
            :total="total"
            :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
  import PageC from "@/components/PageC";
  import {deleteVideoById, getVideos} from "@/api/video";
  import {Message} from "element-ui";
  export default {
    name: "VideoTable",
    components: {PageC},
    computed: {
      tableData: {
        get() {
          return this.$store.state.video.tableData;
        },
        set(value) {
          this.$store.state.video.tableData = value;
        }
      },
      // 选中行id
      multipleSelection: {
        get() {
          return this.$store.state.video.multipleSelection;
        },
        set(value) {
          this.$store.state.video.multipleSelection = value;
        }
      },
      total: {
        get() {
          return this.$store.state.video.total;
        },
        set(value) {
          this.$store.state.video.total = value;
        }
      },
      pageSize: {
        get() {
          return this.$store.state.video.pageSize;
        },
        set(value) {
          this.$store.state.video.pageSize = value;
        }
      },
      currentPage: {
        get() {
          return this.$store.state.video.currentPage;
        },
        set(value) {
          this.$store.state.video.currentPage = value;
        }
      }
    },
    props: {
      topLevel: {
        required: false,
        default: -1,
        type: Number
      },
      editShow: {
        required: true,
        default: false,
        type: Boolean
      },
      delShow: {
        required: true,
        default: false,
        type: Boolean
      },
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val.map((item) => {return item.id;})
      },
      getVideos(params) {
        if (! params) {
          params = {
            "current": this.currentPage,
            "size": this.pageSize
          };
        } else {
          params.current = this.currentPage;
          params.size = this.pageSize;
        }
        // 刷新
        getVideos(params).then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
      },
      editVideo(id) {
        this.$store.dispatch("video/editVideo", id);
      },
      deleteVideo(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteVideoById(id).then((res) => {
            Message.success(res.data.msg);
            this.getVideos();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getVideos();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getVideos();
      }
    },
    created() {
      this.getVideos();
    }
  }
</script>

<style scoped>

</style>
